<!--
 * @Author: your name
 * @Date: 2020-12-26 10:46:35
 * @LastEditTime: 2020-12-26 11:19:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workSpace\bilibili\src\views\Login.vue
-->



<template>
  <div>
    <login-header headerTitle="登录bilibili">
      <div slot="right" @click="$router.push('/register')">切换到注册页</div>
    </login-header>
    <login-input
      style="margin: 4.167vw 0px"
      label="账号"
      rule="^.{6,16}$"
      @inputChange="(res) => (uname = res)"
    ></login-input>
    <login-input
      label="密码"
      type="password"
      rule="^.{6,16}$"
      @inputChange="(res) => (pwd = res)"
    ></login-input>
    <login-btn font="登录" @click.native="registClick"></login-btn>
  </div>
</template>

<script>
import LoginInput from "../components/common/LoginInput.vue";
import LoginHeader from "../components/common/LoginHeader";
import LoginBtn from "../components/common/LoginBtn";
import * as http from "@/utils/Api.js";

export default {
  data() {
    return {
      uname: "",
      pwd: "",
    };
  },
  components: {
    LoginInput,
    LoginHeader,
    LoginBtn,
  },
  methods: {
    async registClick() {
      if (this.uname != "" && this.pwd != "") {
        if (this.uname != "error" && this.pwd != "error") {
          await http
            .regist("/login", {
              name: this.name,
              username: this.uname,
              password: this.pwd,
            })
            .then((res) => {
              // console.log(res);
              if (res.data.code != "200") {
                this.$toast.fail(res.data.msg);
              } else {
                this.$toast.success(res.data.msg);
                //登录成功-------------------------------
                localStorage.setItem("id", JSON.stringify(res.data.id));
                localStorage.setItem("token", JSON.stringify(res.data.token));
                setTimeout(() => {
                  this.$router.push("./userinfo");
                }, 1000);
              }
            });
        } else {
          this.$toast.fail("格式不正确");
        }
      } else {
        this.$toast.fail("未输入内容");
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
